<template>
  <el-container style="height: 100vh;background: white">
    <el-aside :style="{ width: asideWidth + 'px',padding:asideWidth===0?'0':'0 10px' }" class="aside-container">
      <wave-flex-box height="8%" justify-content="space-between">
        <logo/>
        <el-button @click="toggleAside"> {{ isAsideExpanded ? '◀' : '▶' }}</el-button>
      </wave-flex-box>
      <ConversationList/>
    </el-aside>
    <el-main style="padding: 0">
      <el-affix v-if="!isAsideExpanded" :offset="0">
        <wave-flex-box style="width:300px;padding:  0 10px;height:8vh" justify-content="space-between">
          <logo/>
          <el-button @click="toggleAside">
            {{ isAsideExpanded ? '◀' : '▶' }}
          </el-button>
        </wave-flex-box>
      </el-affix>

      <wave-flex-box style="width: 70%;margin: 0 auto;max-width: 1300px"
                     :justify-content="aiLocalStore.bubbles.length===0? 'center': 'start'"
                     direction="column">
        <chat-welcome v-if="aiLocalStore.bubbles.length===0" style="width: 70%"/>
        <br>
        <BubbleList :list="aiLocalStore.bubbles"
                    style="width: 90%;max-height: 80%"/>
        <br>
        <br>
        <EditorSender
            ref="senderRef"
            style="width: 90%;height: 10%"
            submit-type="enter"
            :loading="aiLocalStore.sendLoading"
            @submit="handleSubmit"/>
      </wave-flex-box>
    </el-main>
  </el-container>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import WaveFlexBox from "@/component/WaveFlexBox.vue";
import ChatWelcome from "@/views/system/ai/ChatWelcome.vue";
import {EditorSender} from "vue-element-plus-x";
import {getConversionId} from "@/views/system/ai/js/AiConversationRequest.js";
import {aiChatNormalChat} from "@/views/system/ai/js/AiChatRequest.js";
import {AiUtil} from "@/utils/AiUtil.js";
import {useAiLocalStore} from "@/store/AiLocalStore.js";
import Func from "@/utils/Utils.js";
import ConversationList from "@/views/system/ai/chat/components/ConversationList.vue";
import Logo from "@/views/layout/components/Logo.vue";

const aiLocalStore = useAiLocalStore();

const senderRef = ref();

const asideWidth = ref(300)
const isAsideExpanded = ref(true)

const handleSubmit = (value) => {
  let userBubble = AiUtil.buildBubble('user', 'end', value.text, false, false,
      'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con');
  aiLocalStore.bubbles.push(userBubble)
  let aiBubble = AiUtil.buildBubble('ai', 'start', '', true, true,
      'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con');
  aiBubble.typing = false;
  aiLocalStore.bubbles.push(aiBubble)
  aiLocalStore.sendLoading = true;
  if (aiLocalStore.conversionId === null) {
    return;
  }
  aiLocalStore.sendLoading = true;
  aiChatNormalChat(AiUtil.buildAiChatQuery(aiLocalStore.conversionId, value.text))
}

const toggleAside = () => {
  isAsideExpanded.value = !isAsideExpanded.value
  asideWidth.value = isAsideExpanded.value ? 300 : 0
}


const getCId = async () => {
  const res = await getConversionId()
  return res.data
}

let source = null

onMounted(() => {
  if (Func.isAnyEmpty(aiLocalStore.conversionId)) {
    getCId().then(res => {
      aiLocalStore.conversionId = res
      source = aiLocalStore.sseInit(res)
    });
    return
  }
  source = aiLocalStore.sseInit(aiLocalStore.conversionId)
})


onUnmounted(() => {
  source.close()
})

</script>

<style scoped>

.aside-container {
  background-color: #f5f5f5;
  overflow: hidden;
  transition: width 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
</style>